import {
  PerspectiveCamera,
  Scene,
  WebGLRenderer,
  Mesh,
  BoxBufferGeometry,
  MeshBasicMaterial,
  TextureLoader,
  Clock,
  AmbientLight,
  BoxGeometry,
  Object3D,
  Raycaster,
} from "three";
import { FirstPersonControls } from "three/examples/jsm/controls/FirstPersonControls";
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';

let camera: PerspectiveCamera, scene: Scene, renderer: WebGLRenderer;
let group: Array<Object3D>;
let rayCaster: Raycaster;
let control: FirstPersonControls;
let clock: Clock;

init();
animate();

function init() {
  camera = new PerspectiveCamera(
    70,
    window.innerWidth / window.innerHeight,
    1,
    1000
  );
  camera.position.z = 10    ;
  scene = new Scene();
  clock = new Clock();

  let ambientLight = new AmbientLight('#fff', .8);
  scene.add(ambientLight);

  let geometry = new BoxGeometry(1, 1, 1);
  let material = new MeshBasicMaterial({color: '#f00'});
  let mesh =  new Mesh(geometry, material);
  scene.add(mesh);

  rayCaster = new Raycaster();
  // new GLTFLoader().load(require('../static/modal/FJ_MA.glb').default, gltf => {
  //     scene.add(gltf.scene);
  //     group = gltf.scene.children;
  // })

  renderer = new WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  control = new FirstPersonControls(camera, renderer.domElement);
  control.movementSpeed = 10;
  control.lookSpeed = 0.1;
}

function animate() {
  requestAnimationFrame(animate);
  control.update(clock.getDelta());
  renderer.render(scene, camera);
}
